<template>
  <div id="app">
    <v-header :seller="seller" :name=this.$route.query.name :url=this.$route.query.url></v-header>
    <div class="tab border-1px">
      <div class="tab-item" @click="goodsChange">
        <a>商品</a>
      </div>
      <div class="tab-item" @click="ratingsChange">
        <a>评论</a>
      </div>
      <div class="tab-item" @click="sellerChange">
        <a>商家</a>
      </div>
    </div>
    <router-link to="/">
      <div class="backHome">X</div>
    </router-link>
    <goods :seller="seller"  v-if="this.goodFlag" :name=this.$route.query.name></goods>
    <ratings :seller="seller"  v-if="this.ratingsFlag"></ratings>
    <seller :seller="seller" :name=this.$route.query.name  v-if="this.sellerFlag"></seller>
  </div>
</template>

<script>
  import header from './header/header'
  import {urlParse} from '../common/js/util.js'
  import data from '../common/json/data.json'
  import Goods from './goods/goods'
  import Ratings from './ratings/ratings'
  import Seller from './seller/seller'

  //  const ERR_OK = 0
  //  const debug = process.env.NODE_ENV !== 'production'

  export default {
    name: 'shoper',
    data () {
      return {
        seller: {
          id: (() => {
            let queryParam = urlParse()
            return queryParam.id
          })()
        },
        goodFlag: true,
        ratingsFlag: false,
        sellerFlag: false
      }
    },

    created () {
//      const url = debug ? '/api/seller' : 'http://ustbhuangyi.com/sell/api/seller'
//      this.$http(url + '?id=' + this.seller.id).then((response) => {
//        response = response.data
//        if (response.errno === ERR_OK) {
//          // 给this.seller扩展属性，保留id属性
//          this.seller = Object.assign({}, this.seller, response.data)
//          console.log(this.seller.id)
//        }
//      })
      this.seller = data.seller
    },
    components: {
      'v-header': header,
      Goods,
      Ratings,
      Seller
    },
    methods: {
      goodsChange () {
        this.goodFlag = true
        this.ratingsFlag = false
        this.sellerFlag = false
      },
      ratingsChange () {
        this.goodFlag = false
        this.ratingsFlag = true
        this.sellerFlag = false
      },
      sellerChange () {
        this.goodFlag = false
        this.ratingsFlag = false
        this.sellerFlag = true
      }
    }
  }
</script>

<style lang="stylus" type="text/stylus">
  @import '../common/stylus/mixin.styl'
  .tab
    display: flex
    width: 100%
    height: 40px
    line-height: 40px
    position :relative
    border-1px(rgba(7,17,27,.1))
    .tab-item
      flex: 1
      text-align: center
      & > a
        display: block
        font-size: 14px
        color: rgb(77,85,93)
        &.active
          color: rgb(240,20,20)
  .backHome
    width:30px
    height :30px
    background-color :rgba(0,0,0,.4)
    position:absolute
    top:5px
    right :5px
    border-radius :30px
    line-height :30px
    text-align :center
</style>
